<template>
  <div>
    <el-card class="form-container" shadow="never">
      <el-form :model="homeAdvertise"
               :rules="rules"
               ref="homeAdvertiseFrom"
               label-width="150px"
               size="small">
        <el-form-item label="广告名称：" prop="name">
          <el-input v-model="homeAdvertise.name" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="开始时间：" prop="startTime">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="homeAdvertise.startTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="到期时间：" prop="endTime">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="homeAdvertise.endTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="上线/下线：">
          <el-radio-group v-model="homeAdvertise.status">
            <el-radio :label="0">下线</el-radio>
            <el-radio :label="1">上线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告图片：">
          <single-upload v-model="homeAdvertise.pic"></single-upload>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="广告链接：" prop="url">
          <el-input v-model="homeAdvertise.url" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="广告备注：">
          <el-input
            class="input-width"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="homeAdvertise.note">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
          <el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "addarticle",
  data() {
    return {
      homeAdvertise: {
        name: 'asdfsadf',
        startTime: '2021-10-09 20:33:08'

      },
      rules: {
        name: [
          {required: true, message: '请输入广告名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
        ],
        url: [
          {required: true, message: '请输入广告链接', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '请选择到期时间', trigger: 'blur'}
        ],
        pic: [
          {required: true, message: '请选择广告图片', trigger: 'blur'}
        ]
      },

    }
  }
}

</script>

<style scoped>
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
}
</style>
